<template>
  <div class="page">
    <div class="page-top">
      <!-- 面包屑 -->
      <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
    </div>
    <div class="page-content">
      <a-form-model layout="inline" style="margin-bottom: 20px" :form="form">
        <a-form-model-item label="飞迩编码">
          <a-input v-model="form.scsCode"></a-input>
        </a-form-model-item>
        <a-form-model-item label="管易编码">
          <a-input v-model="form.gyCode"></a-input>
        </a-form-model-item>
        <a-form-model-item label="商品名称">
          <a-input v-model="form.goodName"></a-input>
        </a-form-model-item>
        <a-form-model-item label="是否有效">
          <a-select default-value="全部" style="width:100px" v-model="form.useFlag">
            <a-select-option value=1>有效</a-select-option>
            <a-select-option value=0>无效</a-select-option>
            <a-select-option value=-1>全部</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" html-type="submit" @click="onSubmit"> 提交 </a-button>
          <a-button style="margin-left: 15px" @click="bindReset">
            重置
          </a-button>
          <a-button @click="openModal" style="margin-left: 15px"> 新增 </a-button>
          <a-button @click="delmultiple" style="margin-left: 15px"> 置为无效 </a-button>
          <a-button @click="usefulmultiple" style="margin-left: 15px"> 置为有效 </a-button>
          <a-button @click="exportSCS" style="margin-left: 15px"> 导出 </a-button>
        </a-form-model-item>
      </a-form-model>
			<a-table 
				:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
				:columns="columns"
				:data-source="data"
				:loading="loading"
				:pagination="pagination"
				@change="handleTableChange"
			>
				<span slot="options" slot-scope="text,record">
          <a-button type="primary" @click="del(record)" v-if='record.useFlag==1'>置为无效</a-button>
          <a-button type="primary" @click="useful(record)" v-else>置为有效</a-button>
          <a-button type="primary" @click="edit(record)" style="margin-left:15px">编辑</a-button>
				</span>
			</a-table>
      <a-modal v-model="visible" :title="tit" @ok="handleOk" @cancel="closeModal">
        <a-form-model layout="inline" :form='detail'>
          <a-form-model-item label="飞迩编码"> 
            <a-input style="width:300px" v-model="detail.scsCode"></a-input>
          </a-form-model-item>
          <a-form-model-item label="管易编码"> 
            <a-input style="width:300px" v-model="detail.gyCode"></a-input>
          </a-form-model-item>
          <a-form-model-item label="商品名称" in> 
            <a-input style="width:300px" v-model="detail.goodName"></a-input>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { getSCSGoodsCodeList,addOrUpdateSCSGoodsCode,deleteSCSGoodsCode,usefulSCSGoodsCode,baseUrl } from "@/request/api";
import axios from 'axios';
export default {
  data() {
    return {
			loading:false,
      hreadcrumbAry: [
        { name: "首页", path: "/", query: {} },
        { name: "管易飞迩对照表", path: "/SCScompare", query: {} },
      ],
      form: {
        gyCode:"",
        goodName:"",
        scsCode:"",
        useFlag:'1'
      },
      detail:{
        gyCode:"",
        goodName:"",
        scsCode:"",
        id:"",
        operateBy:JSON.parse(localStorage.getItem("userInfo")).userName,
      },
			pagination: { current: 1, size: 10 },
			data: [],
			selectedRowKeys:[],
			columns:[
				{
          title: "飞迩编码",
          dataIndex: "scsCode",
          key: "scsCode",
          width:''
        },
				{
          title: "管易编码",
          dataIndex: "gyCode",
          key: "gyCode",
          width:''
        },
				{
          title: "商品名称",
          dataIndex: "goodName",
          key: "goodName",
          width:''
        },
        {
          title: "操作时间",
          dataIndex: "createTime",
          key: "createTime",
          width:120
        },
				{
          title: "创建人",
          dataIndex: "createBy",
          key: "createBy",
          width:100
        },
				{
          title: "运行时间",
          dataIndex: "updateTime",
          key: "updateTime",
          width:120
        },
				{
          title: "更新人",
          dataIndex: "updateBy",
          key: "updateBy",
          width:100
        },
				{
          title: "编辑",
          dataIndex: "options",
          key: "options",
          slots: { title: "操作" },
          scopedSlots: { customRender: "options" },
          width: "220px",
        },
			],
      visible:false,
      tit:'编辑'
    };
  },
  components: {
    Hreadcrumb,
  },
	created(){
		this.getSCSGoodsCodeList(1,10)
	},
  methods: {
    async getSCSGoodsCodeList(p,ps){
			 this.loading = true
			 let { gyCode,goodName,scsCode,useFlag } = this.form
			 let params = "p=" + (p -1) + "&ps=" + ps + "&gyCode=" + gyCode + "&goodName=" + goodName + "&scsCode=" + scsCode + "&useFlag=" + useFlag
			 let { data } = await getSCSGoodsCodeList(params);
			 console.log(data)
			 if(data.success){
				 	this.loading = false;
				 	let pagination = { ...this.pagination };
        	pagination.total = data.content.total;
          this.pagination = pagination
					this.data = data.content.records
          this.selectedRowKeys = []
			 }else{
				 	this.loading = false;
			 }
		},
		handleTableChange(pagination) {
    	console.log(pagination);
    	const pager = { ...this.pagination };
    	pager.current = pagination.current;
    	this.pagination = pager;
    	this.getSCSGoodsCodeList(pager.current, pager.size);
    },
		onSubmit(e) {
      e.preventDefault();
      console.log(this.form);
      this.getSCSGoodsCodeList(1, 10);
    },
		bindReset() {
      this.form = {
        gyCode:"",
        goodName:"",
        scsCode:"",
        useFlag:'1'
      };
      this.getSCSGoodsCodeList(1, 10);
    },
		onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    openModal(){
      this.visible = true
    },
    handleOk(){
      this.addOrUpdateSCSGoodsCode()
      this.closeModal()
    },
    edit(record){
      this.detail = {
        id:record.id,
        gyCode:record.gyCode,
        goodName:record.goodName,
        scsCode:record.scsCode,
        operateBy:JSON.parse(localStorage.getItem("userInfo")).userName,
      }
      this.openModal()
    },
    closeModal(){
      this.detail = {
        gyCode:"",
        goodName:"",
        scsCode:"",
        id:"",
        operateBy:JSON.parse(localStorage.getItem("userInfo")).userName,
      }
      this.visible = false
    },
    async addOrUpdateSCSGoodsCode(){
      console.log(this.detail)
      let  { data } = await addOrUpdateSCSGoodsCode(this.detail)
      console.log(data)
      if(data.success){
    	  this.getSCSGoodsCodeList(this.pagination.current,10);
      }else{
        this.$message.error(data.content);
      }
    },
    del(record){
      let ids = []
      ids.push(record.id)
      this.confirmDel(ids)
    },
    useful(record){
      let ids = []
      ids.push(record.id)
      this.confirmUseful(ids)
    },
    delmultiple(){
      let ids = []
      this.data && this.data.map((item,i)=>{
        this.selectedRowKeys && this.selectedRowKeys.map(items=>{
          if(i == items){
            ids.push(item.id)
          }
        })
      })
      this.confirmDel(ids)
    },
    usefulmultiple(){
      let ids = []
      this.data && this.data.map((item,i)=>{
        this.selectedRowKeys && this.selectedRowKeys.map(items=>{
          if(i == items){
            ids.push(item.id)
          }
        })
      })
      this.confirmUseful(ids)
    },
    confirmDel(ids){
      let _this = this
      this.$confirm({
        title: '确定置为无效',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.deleteSCSGoodsCode(ids)
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    confirmUseful(ids){
      let _this = this
      this.$confirm({
        title: '确定置为有效',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.usefulSCSGoodsCode(ids)
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    handleJdDept(e){
      console.log(e)
      this.detail.jdDept = e
    },
    async deleteSCSGoodsCode(arr){
      let _this = this
      let ids = ''
      arr && arr.map(item=>{
        ids += item + ',' 
      })
      let params = 'ids=' + ids + '&operateBy=' + JSON.parse(localStorage.getItem("userInfo")).userName
      console.log(params)
      let { data } = await deleteSCSGoodsCode(params)
      console.log(data)
      if(data.success){
    	  _this.getSCSGoodsCodeList(_this.pagination.current,10);
      }else{
         _this.$message.error(data.content)
      }
    },
    async usefulSCSGoodsCode(arr){
      let _this = this
      let ids = ''
      arr && arr.map(item=>{
        ids += item + ',' 
      })
      let params = 'ids=' + ids + '&operateBy=' + JSON.parse(localStorage.getItem("userInfo")).userName
      console.log(params)
      let { data } = await usefulSCSGoodsCode(params)
      console.log(data)
      if(data.success){
    	  _this.getSCSGoodsCodeList(_this.pagination.current,10);
      }else{
        _this.$message.error(data.content)
      }
    },
    exportSCS(){
      axios({
        method:'get',
        url:`/erp/exportGyScsGoodsCodeExcel`,
        data:'',
        responseType:'blob'
      }).then(res=>{
        console.log(res)
        let blob = new Blob([res.data])
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download','管易飞迩商品对照表.xls')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
  },
};
</script>
<style>
.page-content {
  background-color: #fff;
  padding: 25px;
}
</style>